/*
  学习目标：掌握 -  useEffect提供生命周期- 
 
*/

import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  // 🔔[] 代表挂载后
  // 等价于 componentDidMount
  useEffect(() => {
    console.log('count变化了  ----->  ', count);
    document.title = count;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 🔔[依赖项] 代表: 挂载更新二合一
  // 等价于 💥💥 componentDidMount + componentDidUpdate ， 二合一
  // 类似vue中的watch, 开启immediate
  useEffect(() => {
    console.log('count变化了  ----->  ', count);
    document.title = count;
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}
